<template>
  <div class="subGoodsList">
    <div class="sub_sort">
      <div class="left">
        <ul>
          <li @click="sortHandle(0, '')" :class="{ active: index == 0 }">
            默认排序
          </li>
          <li
            @click="sortHandle(1, 'publishTime')"
            :class="{ active: index == 1 }"
          >
            最新商品
          </li>
          <li
            @click="sortHandle(2, 'orderNum')"
            :class="{ active: index == 2 }"
          >
            最高人气
          </li>
          <li
            @click="sortHandle(3, 'evaluateNum')"
            :class="{ active: index == 3 }"
          >
            评论最多
          </li>
          <li @click="sortHandle(4, 'price')" class="price_sort">
            价格排序<span
              ><i
                class="up iconfont icon-shangjiantou"
                :class="{ active: stutas == true }"
              ></i
              ><i
                class="down iconfont icon-xiajiantou"
                :class="{ active: stutas == false }"
              ></i
            ></span>
          </li>
        </ul>
      </div>
      <div class="right">
        <span
          ><input
            type="checkbox"
            name=""
            id=""
            :checked="inventory"
            @change="inventoryChange"
          />仅显示有货商品</span
        >
        <span
          ><input
            type="checkbox"
            name=""
            id=""
            :checked="onlyDiscount"
            @change="onlyDiscountChange"
          />仅显示特惠商品</span
        >
      </div>
    </div>
    <ul class="goods_list">
      <li v-for="item in goodsData" :key="item.id">
        <my-card
          :img="item.picture"
          :name="item.name"
          :desc="item.desc"
          padding="20px 30px"
          imgHeight="160px"
          :price="item.price"
          nameSize="16px"
          descSize="14px"
          priceSize="20px"
          namePadding="12px 0 0"
          :to="'/product/' + item.id"
        ></my-card>
      </li>
    </ul>
    <img class="loading" v-if="flag" src="@/assets/images/loading.gif" alt="" />
    <div class="without" v-else>
      <img src="@/assets/images/without.png" alt="" />
      <span>亲，没有更多了</span>
    </div>
  </div>
</template>
<script>
import {
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  onBeforeUnmount,
  watch,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getCategorySubGoodsData } from "api/category/category";
/* 引入商品卡片 */
import myCard from "components/communal/myCard";
export default {
  props: {},
  name: "subGoodsList",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      page: 1,
      goodsData: [],
      pageSize: 20,
      pages: 0,
      total: 0,
      time: null,
      flag: true,
      /* 排序的类名添加 */
      sortName: "",
      index: 0,
      stutas: -1,
      /* 有货BOOlean */
      inventory: false,
      /* 特惠商品布尔 */
      onlyDiscount: false,
      /* 价格 */
      priceSort: "",
      id: "",
      /* 页面滚动请求数据 */
      scroll: (e) => {
        // debugger;
        if (data.pages == data.page) {
          data.flag = false;
        } else {
          data.flag = true;
        }
        clearTimeout(data.time);
        let { clientHeight } = document.body;
        if (
          window.pageYOffset + window.innerHeight >=
          clientHeight - data.page * 500
        ) {
          data.time = setTimeout(() => {
            data.page++;
            if (data.page > data.pages) {
              data.page = data.pages;
              return false;
            } else {
              data.getSortData();
            }
          }, 50);
        }
      },
      /* 排序 */
      sortHandle: (i, name) => {
        data.page = 1;
        data.index = i;
        if (data.sortName == name && data.sortName != "price") {
          return false;
        } else {
          data.goodsData = [];
        }
        if (i == 4) {
          data.sortName = "price";
          data.stutas = !data.stutas;
          switch (data.stutas) {
            case true:
              data.priceSort = "asc";
              data.getSortData();
              break;
            case false:
              data.priceSort = "desc";
              data.getSortData();
              break;
            default:
              break;
          }
        } else {
          data.stutas = -1;
          data.priceSort = "";
          data.sortName = name;
          data.getSortData();
        }
      },
      /* 获取排序的商品 */
      getSortData: () => {
        getCategorySubGoodsData({
          data: {
            categoryId: data.id,
            page: data.page,
            pageSize: data.pageSize,
            inventory: data.inventory,
            onlyDiscount: data.onlyDiscount,
            sortField: data.sortName,
            sortMethod: data.priceSort,
          },
        }).then((res) => {
          data.goodsData = [...data.goodsData, ...res.result.items];
          data.pages = res.result.pages;
          data.total = res.result.counts;
          if (data.goodsData.length <= 0) {
            data.flag = false;
          }
        });
      },

      /* 有货商品切换事件 */
      inventoryChange: () => {
        data.inventory = !data.inventory;
        data.goodsData = [];
        data.getSortData();
      },
      /* 特惠商品切换事件 */
      onlyDiscountChange: () => {
        data.onlyDiscount = !data.onlyDiscount;
        data.goodsData = [];
        data.getSortData();
      },
    });
    watch(
      () => route.params.id,
      (newVla, oldVal) => {
        data.id = newVla;
        data.goodsData = [];
        data.getSortData();
        window.scrollTo(0, 0);
      },
      { immediate: true }
    );
    // data.getSortData();
    /* window监听滚动轴的位置 */
    onMounted(() => {
      window.addEventListener("scroll", data.scroll);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("scroll", data.scroll);
    });
    return { ...toRefs(data) };
  },
  components: {
    myCard,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.subGoodsList {
  width: 1240px;
  margin: 0 auto;
  background-color: #fff;
  /* 排序 */
  .sub_sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    .left {
      ul {
        display: flex;
        li {
          padding: 5px 20px;
          border: 1px solid #999;
          margin-right: 20px;
          color: #999;
          cursor: pointer;
          transition: all 0.5s;
          font-size: 14px;
          &.active {
            color: #fff;
            background-color: var(--color);
          }
        }
        .price_sort {
          position: relative;
          .up {
            position: absolute;
            top: 4px;
            right: 6px;
            font-size: 12px;
            &.active {
              color: var(--color);
            }
          }
          .down {
            position: absolute;
            bottom: 3px;
            right: 6px;
            font-size: 12px;
            &.active {
              color: var(--color);
            }
          }
        }
      }
    }
    .right {
      color: #999;
      display: flex;
      align-items: center;
      span {
        padding-left: 20px;
        display: flex;
        align-items: center;
        &:hover {
          color: var(--color);
          cursor: pointer;
        }
        input {
          margin-right: 5px;
          height: 16px;
          width: 16px;
        }
      }
    }
  }
  .goods_list {
    width: 1120px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
    li {
      margin-bottom: 20px;
      width: 220px;
      position: relative;
    }
  }
  .loading {
    display: block;
    margin: 0 auto;
    width: 100px;
  }
  .without {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 200px;
      height: 134px;
    }
    span {
      color: #5f5f5f;
    }
  }
}
</style>